<template>
  <div class="meeting-footer">
    <div class="control-left">
      <div class="control-btn">
        <div class="control-icon">🔒</div>
        <div class="control-label">安全</div>
      </div>
      
      <!-- 移动端更多按钮 -->
      <div v-if="isMobile" class="control-btn more-controls" @click="showMoreControls">
        <div class="control-icon">⋯</div>
        <div class="control-label">更多</div>
      </div>
    </div>
    
    <div class="control-center">
      <div 
        class="control-btn" 
        :class="{active: currentUser.audioEnabled}" 
        @click="$emit('toggle-audio')"
      >
        <div class="control-icon">🎤</div>
        <div class="control-label">
          {{ currentUser.audioEnabled ? '静音' : '解除静音' }}
        </div>
      </div>
      
      <div 
        class="control-btn" 
        :class="{active: currentUser.videoEnabled}" 
        @click="$emit('toggle-video')"
      >
        <div class="control-icon">📹</div>
        <div class="control-label">
          {{ currentUser.videoEnabled ? '关闭视频' : '开启视频' }}
        </div>
      </div>
      
      <div 
        class="control-btn" 
        @click="$emit('toggle-screen-share')"
      >
        <div class="control-icon">🖥️</div>
        <div class="control-label">
          {{ isScreenSharing ? '停止共享' : '共享屏幕' }}
        </div>
      </div>
      
      <div 
        class="control-btn" 
        @click="$emit('switch-tab', 'chat')"
      >
        <div class="control-icon">💬</div>
        <div class="control-label">聊天</div>
      </div>
      
      <div 
        class="control-btn" 
        @click="$emit('switch-tab', 'members')"
      >
        <div class="control-icon">👥</div>
        <div class="control-label">成员</div>
      </div>
      
      <div 
        v-if="!isMobile"
        class="control-btn" 
        @click="$emit('toggle-recording')"
      >
        <div class="control-icon">⏺️</div>
        <div class="control-label">
          {{ isRecording ? '停止录制' : '录制' }}
        </div>
      </div>
      
      <div v-if="!isMobile" class="control-btn">
        <div class="control-icon">⋯</div>
        <div class="control-label">更多</div>
      </div>
    </div>
    
    <div class="control-right">
      <div 
        class="control-btn leave-btn" 
        @click="$emit('leave-meeting')"
      >
        <div class="control-icon">📞</div>
        <div class="control-label">离开</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MeetingFooter',
  props: {
    currentUser: {
      type: Object,
      required: true
    },
    isScreenSharing: {
      type: Boolean,
      default: false
    },
    isRecording: {
      type: Boolean,
      default: false
    },
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    showMoreControls() {
      this.$message({
        message: '更多控制选项',
        type: 'info'
      });
      // 在实际应用中，这里可以显示一个包含更多选项的弹出菜单
    }
  }
}
</script>

<style scoped>
@import '../styles/meeting-footer.css';
</style>